<template>
  <div class="container">
    <div v-for="(url, index) in playUrl" :key="index" class="video-container">
      <video ref="videoPlayer" :id="'video_' + index" controls></video>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import flvjs from "flv.js";

export default {
  data() {
    return {
      Data: [],
      orgIds: [],
      playUrl: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios({
        method: "get",
        url: "https://816i9307t1.vicp.fun/yaqxfw/api/v3/channel/listByOrgId",
      })
      .then((res) => {
        this.Data = res.data.data;
        this.orgIds = this.Data.map(item => item.citId);
        console.log(this.Data)
      
        this.Data.forEach(item => {
          this.getData(item.citId, item.natType, item.transType);
        });
      })
      .catch((error) => {
        console.error(error);
      });
    },
    getData(orgId, natType, transType) {
      axios({
        method: "get",
        url: "https://816i9307t1.vicp.fun/yaqxfw/api/v3/channel/RealTimeVideo",
        params: {
          natType: 1,
          transType: 4,
          orgId: orgId,
        }
      })
      .then((res) => {
        const url = res.data.data.playUrl;
        this.playUrl.push(url);
        this.$nextTick(() => {
          this.initFlvPlayer(url, this.playUrl.length - 1);
        });
      })
      .catch((error) => {
        console.error(error);
      });
    },
    initFlvPlayer(url, index) {
  if (flvjs.isSupported()) {
    const videoElement = this.$refs.videoPlayer[index];
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: url
    });

    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();

    flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
      console.error(`Error type: ${errType}, Details: ${errDetail}`);
    });
  } else {
    console.error('FLV.js is not supported in this browser.');
  }
}

  }
};
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

video {
  width: 100%;
  max-width: 100%;
}
</style>